<template>
  <div>
    <div style="display: flex; justify-content: flex-start">
      <el-input
        placeholder="档案号/姓名/手机号"
        v-model="page.searchObj.queryName"
        autofocus
        style="width: 230px; margin-right: 30px"
        clearable
        ><i slot="prefix" class="el-input__icon el-icon-search"></i
      ></el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="queryMemberGroupClassification"
        >搜索</el-button
      >
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="65vh"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="file_number" label="档案号" sortable>
      </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="value">
          <span>{{ value.row.sex | sexFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" sortable> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column label="执行状态">
        <template slot-scope="value">
          <span v-if="value.row.t_state==null">
            <el-tag type="warning">待执行</el-tag>
            </span>
            <span v-else-if="value.row.t_state==0">
              <el-tag type="">执行中</el-tag>
            </span>
            <span v-else>
              <el-tag type="success">已执行</el-tag>
            </span>
        </template>
      </el-table-column>
      <el-table-column prop="start_time" label="开始时间" sortable>
        <template slot-scope="value">
          <span v-if="value.row.t_state==null">
            </span>
            <span v-else-if="value.row.t_state==0">
              <el-tag type="">{{value.row.start_time}}</el-tag>
            </span>
            <span v-else>
              <el-tag type="success">{{value.row.start_time}}</el-tag>
            </span>
          
        </template>
      </el-table-column>
      <el-table-column prop="end_time" label="结束时间" sortable>
        <template slot-scope="value">
          <span v-if="value.row.t_state==null">
            </span>
            <span v-else-if="value.row.t_state==0">
              <el-tag type="">{{value.row.end_time}}</el-tag>
            </span>
            <span v-else>
              <el-tag type="success">{{value.row.end_time}}</el-tag>
            </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="value">
          <span>
            <div>
            <el-link type="primary" @click="draft(value.row)">制定方案</el-link>
            </div>
            <div>
            <el-link type="primary" @click="endDraft(value.row)">结束方案</el-link>
            </div>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[5, 10]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="体检报告" :visible.sync="dialogTableVisible" width="85%">
      <div style="display: flex; justify-content: space-around">
        <el-tabs type="border-card">
          <el-tab-pane label="档案信息" style="width: 600px; height: 50vh">
            <el-form
              ref="numberValidateForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <div style="display: flex; justify-content: space-around">
                <div>
                  <el-form-item label="档案号：">
                    <el-input
                      autocomplete="off"
                      v-model="message.file_number"
                      readonly
                    ></el-input>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="姓名：">
                    <el-input
                      autocomplete="off"
                      v-model="message.name"
                      readonly
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div style="display: flex; justify-content: space-around">
                <div>
                  <el-form-item label="性别：">
                    <el-input
                      autocomplete="off"
                      v-model="message.sex"
                      readonly
                    ></el-input>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="年龄：">
                    <el-input
                      autocomplete="off"
                      v-model="message.age"
                      readonly
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
              <div>
                <el-form-item label="既往史">
                  <el-input
                    type="textarea"
                    v-model="message.past_history"
                    readonly
                  ></el-input>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="家族史">
                  <el-input
                    type="textarea"
                    v-model="message.family_history"
                    readonly
                  ></el-input>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="过敏史">
                  <el-input
                    type="textarea"
                    v-model="message.allergic_history"
                    readonly
                  ></el-input>
                </el-form-item>
              </div>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="体检信息" style="width: 600px; height: 50vh">
            <el-table :data="tableMessage" style="width: 100%; height: 45vh">
              <el-table-column prop="file_number" label="档案号">
              </el-table-column>
              <el-table-column prop="healthTime" label="体检日期">
              </el-table-column>
              <el-table-column label="查看体检报告">
              <template slot-scope="value">
                <span>
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="queryTExaminationById(value.row)"
                    ><i class="el-icon-view el-icon--right"></i> 查看</el-link
                  >
                </span>
              </template>
            </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="评估报告" style="width: 600px; height: 50vh">
            <el-divider><i class="el-icon-guide"></i>体质评估</el-divider>
            <el-table :data="tableMessage" style="width: 100%;margin-top;:20px">
              <el-table-column prop="file_number" label="档案号">
              </el-table-column>
              <el-table-column prop="physiqueData" label="体质评估日期">
              </el-table-column>
              <el-table-column prop="lack_of_vital_energy" label="阳虚体质">
              </el-table-column>
              <el-table-column prop="deficiency_of_yin" label="阴虚体质">
              </el-table-column>
            </el-table>

            <el-divider><i class="el-icon-guide"></i>心理评估</el-divider>

            <el-table :data="tableMessage" style="width: 100%;margin-top;:20px">
              <el-table-column prop="file_number" label="档案号">
              </el-table-column>
              <el-table-column prop="psychologyData" label="心理评测日期">
              </el-table-column>
              <el-table-column prop="soma" label="躯体化"> </el-table-column>

              <el-table-column prop="obsession" label="强迫症化">
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane style="height: 50vh" label="确认分类">
            <el-divider><i class="el-icon-guide"></i>确认分类</el-divider>
            <div style="margin: 40px 0px">
              <el-checkbox-group v-model="check" size="small">
                <el-checkbox
                  v-for="check in checkeds"
                  :label="check"
                  :key="check"
                  disabled
                  border
                  >{{ check }}</el-checkbox
                >
              </el-checkbox-group>
            </div>
            <el-divider
              ><i class="el-icon-user-solid"></i>健康管理师</el-divider
            >
            <el-select
              style="margin: 20px 0px"
              v-model="value"
              clearable
              placeholder="请选择"
              disabled
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.user_name"
                :value="item.user_name"
              >
              </el-option>
            </el-select>
          </el-tab-pane>
        </el-tabs>
        <el-tabs type="border-card">
          <el-tab-pane label="基本信息" style="width: 600px; height: 50vh">
            <el-form
              ref="numberValidateForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <div style="display: flex; justify-content: center">
                <el-form-item label="选用模板">
                  <el-select v-model="value1" clearable placeholder="请选择" @change="ckeckMould">
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.keyword"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div>
                <el-date-picker
                  style="width: 67%"
                  v-model="data"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </div>
              <div
                style="display: flex;justify-content: space-around;margin-top: 20px;"
              >
                <div>
                  <el-form-item label="标题">
                    <el-input autocomplete="off" v-model="mould.title" disabled></el-input>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="关键字">
                    <el-input autocomplete="off" v-model="mould.keyword" disabled></el-input>
                  </el-form-item>
                </div>
              </div>
              <div style="display: flex; justify-content: space-around">
                <div>
                  <el-form-item label="适用人群">
                    <el-input autocomplete="off" v-model="mould.suit" disabled></el-input>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="方案目标">
                    <el-input autocomplete="off" v-model="mould.target" disabled></el-input>
                  </el-form-item>
                </div>
              </div>
              <div>
                <el-form-item label="备注">
                  <el-input type="textarea" rows="3" v-model="mould.remarks" disabled></el-input>
                </el-form-item>
              </div>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="饮食干预" style="width: 600px; height: 50vh">
            <el-table ref="multipleTable1" :data="tableData1" tooltip-effect="dark" style="width: 100%; height: 45vh">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="foodid" label="编号"> </el-table-column>
              <el-table-column prop="foodname" label="食品名称">
              </el-table-column>
              <el-table-column prop="foodtype" label="类型"> </el-table-column>
              <el-table-column prop="foodheat" label="100g含能量">
              </el-table-column>
              <el-table-column prop="protein" label="蛋白质量">
              </el-table-column>
              <el-table-column prop="fat" label="脂肪量"> </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page="page1.pageNum"
                :page-sizes="[4]"
                :page-size="page1.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total1"
              >
              </el-pagination>
            </div>
          </el-tab-pane>

          <el-tab-pane label="运动干预" style="width: 600px; height: 50vh">
            <el-table ref="multipleTable2" :data="tableData2" tooltip-effect="dark" style="width: 100%; height: 45vh">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="exerciseid" label="编号">
              </el-table-column>
              <el-table-column prop="ydmz" label="名称"> </el-table-column>
              <el-table-column prop="ydqd" label="运动强度"> </el-table-column>
              <el-table-column prop="qbdl" label="千步当量"> </el-table-column>
              <el-table-column prop="ydsj" label="运动时间"> </el-table-column>
              <el-table-column prop="nlqj" label="年龄区间"> </el-table-column>
            </el-table>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="page2.pageNum"
                :page-sizes="[4]"
                :page-size="page2.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total2"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="体检报告"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div style="display: flex; justify-content: center">
        <el-image
          v-for="item in imgs"
          class="m-2"
          :key="item.id"
          style="width: 300px; height: 400px"
          :src="item.examinimg"
          fit="contain"
          :preview-src-list="srcs"
          @click="vbs(item.examinimg)"
        ></el-image>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
    
    
    <script>
export default {
  data() {
    return {
      checkeds: ["正常", "高血压", "高血糖", "高血脂", "脂肪肝", "冠心病"],
      check: [],
      value1: "", //模板
      data:"",//时间
      options: [],
      value: "", //健康管理师
      tableData: [], //表格数据
      total: 0, //总页数
      page: {
        //分页查询条件
        pageNum: 1, //当前页
        pageSize: 5, //页面数量
        searchObj: {
          //条件对象
          queryName: "", //档案号/姓名
        },
      },
      dialogTableVisible: false, //制定模态框布尔值
      page1: {
        //膳食分页
        //分页查询条件
        pageNum: 1, //当前页
        pageSize: 4, //页面数量
        searchObj: {
          //条件对象
          foodname: "", //标题
        },
      },
      tableData1: [], //表格数据
      total1: 0, //总数量

      page2: {
        //运动分页
        //分页查询条件
        pageNum: 1, //当前页
        pageSize: 5, //页面数量
        searchObj: {
          //条件对象
          query: "", //标题
        },
      },
      tableData2: [], //表格数据
      total2: 0, //总数量
      //制定方案个人信息
      message: {},
      tableMessage: [],
      //模板信息
      mould:{},
      //干预信息
      interposeScheme:{
        rid:0,//预约编号
        t_member_id:'',//会员编号
        scheme_tittle:'',//方案标题
        model_id:0,//选用模板编号
        start_time:'',//开始时间
        end_time:'',//结束时间
        scheme_target:'',//方案目标
        health_mgr_id:'',//健康管理师编号
        createtime:'',//创建时间
        updatetime:''//修改时间
      },
      centerDialogVisible:false,
      imgs:[],
      srcs:[],
    };
  },
  created() {
    this.queryMemberGroupClassification();
    this.queryAllFood(); //膳食
    this.queryAllExercise(); //运动
    this.queryMouldAll(); //模板
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.queryMemberGroupClassification();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.queryMemberGroupClassification();
    },
    //膳食
    handleSizeChange1(val) {
      this.page1.pageSize = val;
    },
    handleCurrentChange1(val) {
      this.page1.pageNum = val;
    },
    //运动
    handleSizeChange2(val) {
      this.page2.pageSize = val;
    },
    handleCurrentChange2(val) {
      this.page2.pageNum = val;
    },
    // 查询所有模板
    queryMouldAll() {
      this.axios.post("/api/hj/queryMould", this.page).then((result) => {
        this.options = result.data;
      });
    },
    //查询膳食信息
    queryAllFood() {
      this.axios.post("/api/lzh/queryAllFood", this.page).then((result) => {
        this.total1 = result.data.total;
        this.tableData1 = result.data.list;
      });
    },
    //查询运动信息
    queryAllExercise() {
      this.axios.post("/api/lzh/queryAllExercise", this.page).then((result) => {
        this.total2 = result.data.total;
        this.tableData2 = result.data.list;
      });
    },
    //查询所有分类的会员信息
    queryMemberGroupClassification() {
      this.axios
        .post("/api/hj/queryMemberGroupClassification", this.page)
        .then((result) => {
          this.total = result.data.total;
          this.tableData = result.data.list;
        });
    },
    //制定方案
    draft(obj) {
      this.interposeScheme.rid=obj.rid;//预约编号
      this.interposeScheme.t_member_id=obj.file_number;//会员编号
      this.tableMessage=[];
      this.axios
        .get("/api/hj/queryBookIngById", {
          params: {
            rid: obj.rid,
          },
        })
        .then((result) => {
          console.log(result.data);
          this.interposeScheme.health_mgr_id=result.data.kang_manager_id;//健康管理师编号
          this.message = result.data;
          this.tableMessage.push(result.data);
          this.value = result.data.kang_manager;
          let arr = [];
          arr = result.data.group_classification.split("/");
          arr.forEach((item) => {
            if (item) {
              this.check.push(item);
            }
          });
          if (this.message.sex > 0) {
            this.message.sex = "男";
          } else {
            this.message.sex = "女";
          }
        });
      this.dialogTableVisible = true;
    },
    //选用模板
    ckeckMould(){
        this.axios.get("/api/hj/queryMouldById",{
          params:{
            id:this.value1,
          }
        }).then(result=>{
          console.log(result.data)
          this.interposeScheme.scheme_tittle=result.data.title;//方案标题
          this.interposeScheme.model_id=result.data.id;//选用模板编号
          this.interposeScheme.scheme_target=result.data.target;//方案目标

          this.$refs.multipleTable1.clearSelection();
          this.$refs.multipleTable2.clearSelection();
          this.mould=result.data;
          this.tableData1.forEach(row => {
            result.data.foods.forEach(food=>{
              if(row.foodid==food.foodid){
                this.$refs.multipleTable1.toggleRowSelection(row);
              }
            })
          });
          this.tableData2.forEach(row => {
            result.data.exercises.forEach(exercise=>{
              if(row.exerciseid==exercise.exerciseid){
                this.$refs.multipleTable2.toggleRowSelection(row);
              }
            })
          });
        })
    },
    save(){
      if(this.value1!=''){
        if(this.data.length>0){
          this.interposeScheme.start_time=this.data[0];//开始时间
      this.interposeScheme.end_time=this.data[1];//结束时间
      let date = new Date();
      this.interposeScheme.createtime=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();//创建时间
      this.interposeScheme.updatetime=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();//修改时间
      this.axios.post('/api/hj/addOrUpdateTInterposeScheme',this.interposeScheme)
      .then(result=>{
        if(result.data>0){
          this.$message({
                  showClose: true,
                  message: '成功操作一条数据',
                   type: 'success'
          });
          this.queryMemberGroupClassification();
          this.dialogTableVisible=false;
        }
      });
        }else{
        this.$message('请选开始与结束时间');
          
        }
      }else{
        this.$message('请选择一项干预模板信息');
      }
      
    },
    // 结束方案
    endDraft(obj){
      console.log(obj);
      this.axios.get("/api/hj/updateStateService",{params:{rid:obj.rid}})
      .then(result=>{
        if(result.data>0){
          this.$message({
                  showClose: true,
                  message: '成功操作一条数据',
                   type: 'success'
          });
          this.queryMemberGroupClassification();
        }
      })
    },
    //体检查询
    queryTExaminationById(data) {
      this.axios
        .get("/api/hj/queryTExaminationById", {
          params: {
            id: data.t_tid,
          },
        })
        .then((result) => {
          this.imgs=result.data;
          this.centerDialogVisible=true;
        });
    },
    vbs(data){
      this.srcs.push(data);
    },
  },
  filters: {
    // 性别
    sexFilter: function (data) {
      return data == 0 ? "女" : "男";
    },
  },
};
</script>